<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo</title>
    <script src="../node_modules/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>

    <div id="app">
        <ul>
            <!-- 循环 绑定key 解除警告-->
            <product-com v-for='item,key in proList' :key='key' :product="item"></product-com>
        </ul>
        <hr>
        <ul>
            <!-- 事件触发传值 -->
            <!-- 也可以传方法给子组件 props要加入-->
            <!-- 通过  this.$parent  可以找到父组件 -->
            <school v-for='item,key in school' :key='key' :schoolname='item.schoolName' @choose-school='changeEvent(item.schoolName)'></school>
        </ul>
        <h4>你选择的学校是:{{schoolName}}</h4>
    </div>

    <script type="text/javascript">

        //组件练习1
        Vue.component("product-com", {
            props: ["product"],
            template: `<li>
                        <h2>产品名称:{{product.title}}</h2>
                        <h3>产品价格:{{product.price}}</h3>
                        <p>产品描述:{{product.brief}}</p>
                    </li>`,
        })
        //组件练习2
        Vue.component("school", {
            props: ["schoolname"], // 传属性值
            template: `<li>
                        <h2>学校名称:{{schoolname}}</h2>
                        <button @click='selectSchool(schoolname)'>选择学校</button>
                    </li>`,
            methods: {
                selectSchool: function (schoolName) {
                    console.log(schoolName)
                    //想要把子元素数据传递给父元素 需要自定事件
                    this.$emit('choose-school')
                }
            }
        })

        let app = new Vue({
            el: "#app",
            data: {
                proList: [
                    {
                        title: '产品1',
                        price: '10',
                        brief: '产品描述1'
                    }, {
                        title: '产品2',
                        price: '11',
                        brief: '产品描述2'
                    }, {
                        title: '产品3',
                        price: '12',
                        brief: '产品描述3'
                    },
                ],
                school: [
                    {
                        schoolName: "清华大学"
                    }, {
                        schoolName: "北京大学"
                    }, {
                        schoolName: "浙江大学"
                    }
                ],
                schoolName: ''
            },
            methods: {
                changeEvent: function (data) {
                    console.log("事件-->", data)
                    this.schoolName = data
                },

            }

        })
    </script>
</body>

</html>